<template>
    <div class="menutree">
        <!-- 批量操作 -->
        <div class="action-btn">
            <Button size="small" @click="addMenu" type="success">添加一级菜单</Button>
        </div>
        <Table border height="650" ref="roleList" row-key="menu_id" :columns="list" :data="menutree" :loading="dataloading">
            <template #sort="{ row }">
                <InputNumber v-model="row.sort" size="small" :min="0" @on-change="sortDetail(row.menu_id, $event)" />
            </template>
            <template #display="{ row }">
                <Tag v-if="row.display" color="cyan">显示</Tag>
                <Tag v-if="!row.display" color="orange">隐藏</Tag>
            </template>
            <template #action="{ row }">
                <Button type="success" size="small" style="margin-right: 5px;float:left"
                    @click="append(row)">子菜单</Button>
                <Button type="warning" size="small" style="margin-right: 5px;float:left"
                    @click="detail(row)">修改</Button>
                <Button type="error" size="small" @click="remove(index, row)">删除</Button>
            </template>
        </Table>
        <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加角色" width="640"
            v-model="showModalStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :label-width="80" ref="menuData" :model="menuData" :rules="menuValidate" action="javascript:void(0)">
                <FormItem label="父级菜单">
                    <TreeSelect clearable v-model="menuData.parent_id" :data="menuSelect"></TreeSelect>
                </FormItem>
                <FormItem label="菜单名称" prop="name">
                    <Input v-model="menuData.name" placeholder="请输入权限菜单名称..."></Input>
                </FormItem>
                <FormItem label="菜单URL" prop="url">
                    <Input v-model="menuData.url" placeholder="请输入权限菜单URL..."></Input>
                </FormItem>
                <FormItem label="菜单标签" prop="label">
                    <Input v-model="menuData.label" placeholder="请输入权限菜单标签..."></Input>
                </FormItem>
                <FormItem label="菜单图标">
                    <Input v-model="menuData.icon" placeholder="请输入权限菜单图标..."></Input>
                </FormItem>
                <FormItem label="显示状态">
                    <i-switch :true-value="1" :false-value="0" v-model="menuData.display">
                        <span slot="on">显示</span>
                        <span slot="off">隐藏</span>
                    </i-switch>
                </FormItem>
                <FormItem label="排序">
                    <InputNumber :max="9999" :min="0" v-model="menuData.sort"></InputNumber>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="handleReset('menuData')">取消</Button>
                    <Button type="primary" @click="handleSubmit('menuData')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataloading: true,
            menuData: {
                id: 0,
                parent_id: 0,
                name: '',
                url: '',
                label: '',
                icon: '',
                display: 1,
                sort: 0
            },
            menuValidate: {
                name: [
                    { required: true, message: '菜单名称必须填写', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '菜单地址必须填写', trigger: 'blur' }
                ],
                label: [
                    { required: true, message: '菜单标签必须填写', trigger: 'blur' }
                ]
            },
            menutree: [],
            list: [
                {
                    title: '名称',
                    minWidth: 300,
                    key: 'title',
                    tree: true,
                },
                {
                    title: '排序',
                    width: 100,
                    slot: 'sort',
                },
                {
                    title: '显示',
                    width: 100,
                    slot: 'display',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 200,
                    align: 'left',
                }
            ],
            menuSelect: [],
            showModalStatus: false,
            loading: false,
        }
    },
    created: function () {
        this.getMenuTree();
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    // 判断是添加还是修改
                    if (this.menuData.id == 0) {
                        this.$api.menu.create(this.menuData).then(res => {
                            // 更新左侧的树
                            this.getMenuTree();
                            this.showModalStatus = !this.showModalStatus
                        }).finally(e => {
                            this.loading = false;
                        });
                    } else {
                        this.menuData.detail_id = this.menuData.id;
                        this.$api.menu.edit(this.menuData).then(res => {
                            // 更新左侧的树
                            this.getMenuTree();
                            this.showModalStatus = !this.showModalStatus
                        }).finally(e => {
                            this.loading = false;
                        });
                    }
                }
            })
        },
        handleReset(name) {
            this.showModalStatus = !this.showModalStatus
            this.$refs[name].resetFields();
        },
        getMenuTree: function () {
            this.$api.menu.tree().then(res => {
                this.menutree = res.result
                this.dataloading = false
            });
        },
        // 单条选中
        detail(data) {
            this.showModalStatus = !this.showModalStatus
            this.$api.menu.select().then(res => {
                this.menuSelect = res.result;
            });
            this.$api.menu.detail({ 'detail_id': data.menu_id }).then(res => {
                this.menuData = res.result;
            });
        },
        // 添加
        append(data) {
            this.showModalStatus = !this.showModalStatus
            this.$api.menu.select().then(res => {
                this.menuSelect = res.result;
                // 取到parentid，其它_置空
                this.menuData = {
                    id: 0,
                    parent_id: data.menu_id,
                    name: '',
                    url: '',
                    label: '',
                    icon: '',
                    display: 1,
                    sort: 0
                };
            });
        },
        // 添加一级菜单
        addMenu() {
            this.showModalStatus = !this.showModalStatus;
            this.$api.menu.select().then(res => {
                this.menuSelect = res.result;
            });
            // 取到parentid，其它_置空
            this.menuData = {
                id: 0,
                parent_id: 0,
                name: '',
                url: '',
                label: '',
                icon: '',
                display: 1,
                sort: 0
            };
        },
        // 修改
        remove(index,data) {
            // 弹出提示
            this.$Modal.confirm({
                title: '警告',
                content: '<p>确认删除此菜单及所有下级菜单吗？</p><p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    this.$api.menu.remove({ 'detail_id': data.menu_id }).then(res => {
                        // 更新左侧的树
                        this.getMenuTree();
                    });
                },
                onCancel: () => {
                }
            });
        },
        sortDetail(id, value) {
            this.$api.menu.sort({ detail_id: id, sort: value }).then(res => {
                this.getMenuTree();
            });
        }
    }
}
</script>
